<template>
  <mt-tabbar v-show="isshow" class="foot" fixed v-model="selected">
    <mt-tab-item :class="selected == 'home'? fff:''" class="fcolor" id="home">
      <div slot="icon" class="iconfont">&#xe6cb;</div>
      首页
    </mt-tab-item>
    <mt-tab-item :class="selected == 'classic'? fff:''" class="fcolor" id="classic">
      <div slot="icon" class="iconfont">&#xe682;</div>
      分类
    </mt-tab-item>
    <mt-tab-item :class="selected == 'brand'? fff:''" class="fcolor" id="brand">
      <div slot="icon" class="iconfont">&#xe601;</div>
      品牌
    </mt-tab-item>
    <mt-tab-item :class="selected == 'groupbuying'? fff:''" class="fcolor" id="groupbuying">
      <div slot="icon" class="iconfont">&#xe643;</div>
      团购
    </mt-tab-item>
    <mt-tab-item :class="selected == 'mine'? fff:''" class="fcolor" id="mine">
      <div slot="icon" class="iconfont">&#xe62d;</div>
      我
    </mt-tab-item>
  </mt-tabbar>
</template>

<script>
  import { mapState } from 'vuex'
  import Vue from 'vue'
  import { Tabbar, TabItem } from 'mint-ui';
  Vue.component(Tabbar.name, Tabbar);
  Vue.component(TabItem.name, TabItem);
    export default {
      data(){
        return{
          fff:'fff',
          selected:'home'
        }
      },
        name: "foot",
      watch:{
        selected(){
          this.$router.push(this.selected)
        }
      },
      computed:{
        isshow (){
          let a = this.$store.state.show;
          return a;
        },
        ...mapState['show']
      }
    }
</script>

<style scoped lang="stylus">
  .mint-tabbar > .mint-tab-item.is-selected
    background: transparent
  .foot
    background: #581513
    .fcolor
      color: #e44541
    .fff
      color: #ffffff
    .iconfont
      font-size: 1.2rem
</style>
